<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../js/vue.js"></script>
    <style>
        .div-box {
            font-size: 16px;
        }

        .tab {
            font-size: 18px;
        }

        .active {
            color: red;
        }

        .unactive {
            color: gray;
        }

        .btn-box{
            height: 300px;
            background: #42b983;
        }
    </style>
</head>

<body>
<div id="app">
    <my-component></my-component>
    <input type="text" name="query" id="query" v-model.lazy="query"/><span v-text="query"></span><br/>
    <input name="query2" id="query2" v-model.trim="num"/><span style="border:1px solid red;">{{num}}</span><br/>
    <div class="tab" :class="{'active' : active , 'unactive' : !active}">
        tab &times;
    </div>
    <div v-if="isshow">yes</div>
    <div v-else>no</div>
    <div v-show="show">show</div>
    <div v-show="!show">hidden</div>
    <ul>
        <li v-for="(item,index) in items">
            <h3>{{index }} - {{item.title}}</h3>
            <p>{{index }} - {{item.description}}</p>
        </li>
    </ul>

    <div class="btn-box" @click.self="btnEvent">
        <button id="btn1" v-on:click.stop="showEvent">Event</button>
        <button id="btn2" v-on:click="showEvent($event)">showEvent</button>
        <!-- // 这样写获取不到 event -->
        <button id="btn3" v-on:click="showEvent()">showEvent</button>
    </div>
</div>

<script type="x-template" id="temp">
    <div class="div-box">
        <p>This is a template .</p>
    </div>
</script>

<script>
    Vue.component('my-component', {
        template: '#temp'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            query: '1111',
            num: 'fff',
            active: true,
            isshow: true,
            show: true,
            items: [
                {title: 'vue.js实战', description: '这是一本神器的书籍'},
                {title: 'vue.js前端框架', description: '这是一本神器的框架'},
            ]
        },
        created(){
            debugger;
            console.info('before compile');
        },
        methods: {
            showEvent(e) {
                console.info('showEvent');
                console.info(e);
                // e.stopPropagation();
            },
            btnEvent(e) {
                console.info('btn-event');
                console.info(e);
            }
        }
    })
</script>
</body>

</html>
